<template>
  <div class="message-page flex flex-column">
    <div class="hospital-info flex">
      <div class="hospital-icon iconfont iconyiyuan" />
      <div class="hospital-name">
        {{ currentDept.hospitalName }} {{ currentDept.departmentName }}
      </div>
    </div>

    <div class="message-box flex1" ref="messageBoxRef">
      <van-list
        finished-text="没有更多了"
        direction="up"
        v-model:loading="pageStatus.loading"
        :finished="pageStatus.allLoaded"
        @load="nextMessage"
      >
        <template v-for="item in messageResulte.data.records" :key="item.instantMsgId">
          <MsgItem :msg-item="item" />
        </template>
      </van-list>
    </div>
    
    <div class="message-tools" v-if="sendIsShow">
      <div class="message-input-box flex">
        <div class="flex1">
          <input
            type="text"
            class="message-input"
            placeholder="请输入内容..."
            v-model="imModel.resource"
          >
        </div>
        <div
          class="message-btn"
          :class="{ disable: !imModel.resource }"
          @click="sendText"
        >
          发送
        </div>
      </div>
      <div class="file-options flex">
        <UploadFile
          class="file-btn"
          @success="sendImg"
          accept="image/png, image/gif, image/jpg, image/jpeg"
        >
          <div class="file-icon iconfont icontupian" />
          上传照片
        </UploadFile>
        <UploadFile
          class="file-btn"
          accept="video/mp4"
          @success="sendVideo"
        >
          <div class="file-icon iconfont iconluzhishipin" />
          上传视频
        </UploadFile>
      </div>
    </div>

    <div class="wfull flex flex-center bg-gray" v-else>
      <div class="disabled-buttom">
        <span class="button-text">科室未开启功能，不可发起咨询</span>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, watch, ref, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { useCurrentDeptInfo, useUserInfo } from '@/hooks/store';
import { usePageLoadStatus } from '@/hooks/utils';
import { useService } from '@/utils/services';
import { SENDER_TYPE, RESOURCE_TYPE_NUM } from '@/constants/business';
import { EMPTY_PAGE_BEAN } from '@/constants/common';
import UploadFile from '@/components/UploadFile';

import MsgItem from './components/MsgItem';

export default {
  components: { MsgItem, UploadFile },
  setup() {
    // const route = useRoute();
    const store = useStore();
    const actions = useService();
    const sendIsShow = ref(false);
    const pageParams = reactive({
      currentPage: 1,
      pageSize: 20
    });

    const messageBoxRef = ref(null);

    const currentDept = useCurrentDeptInfo();
    const userInfo = useUserInfo();

    //
    store.dispatch('getSurplus');

    actions.hos.getHomeSetting().then((res) => {
      sendIsShow.value = res.patientConsultationStatus;
    });

    const messageResulte = reactive({
      data: EMPTY_PAGE_BEAN
    });

    const pageStatus = usePageLoadStatus(messageResulte);

    function getMessageList() {
      actions.hos
        .getMessageList({
          ...pageParams,
          departmentId: currentDept.value.departmentId,
          patientsId: userInfo.value.patientsId
        })
        .then((data) => {
          data.records.reverse();
          if (data.current != 1) {
            messageResulte.data = {
              ...data,
              records: [...data.records, ...messageResulte.data.records]
            };
          } else {
            messageResulte.data = data;
            scrollBottom();
          }
        });
    }

    function nextMessage() {
      pageParams.currentPage += 1;
      getMessageList();
    }

    const imModel = reactive({
      resource: '',
      resourceType: ''
    });

    // 发送消息
    const sendInstantMsg = () => {
      if (!imModel.resource) {
        return;
      }

      let msgParams = {
        receiving: currentDept.value.departmentId,
        resource: imModel.resource,
        resourceType: imModel.resourceType,
        sender: userInfo.value.patientsId,
        mediaDuration: imModel.mediaDuration,
        senderType: SENDER_TYPE.PATIENT,
        coverPicture: imModel.coverPicture
      };
      actions.hos.sendInstantMsg(msgParams).then(() => {
        imModel.resource = '';
        messageResulte.data.records.push({
          ...msgParams,
          patientsHeadImgUrl: userInfo.value.headImgUrl
        });
        scrollBottom();
      });
    };

    const sendImg = ({ fileUri }) => {
      imModel.resource = fileUri;
      imModel.resourceType = RESOURCE_TYPE_NUM.IMAGE;
      sendInstantMsg();
    };

    const sendText = () => {
      imModel.resourceType = RESOURCE_TYPE_NUM.TEXT;
      sendInstantMsg();
    };

    const sendVideo = ({ fileUri, mediaDuration, poster }) => {
      imModel.resource = fileUri;
      imModel.mediaDuration = mediaDuration;
      imModel.resourceType = RESOURCE_TYPE_NUM.VIDEO;
      imModel.coverPicture = poster;
      sendInstantMsg();
    };

    function scrollBottom() {
      setTimeout(() => {
        nextTick(() => {
          messageBoxRef.value.scrollTop = 10000000;
        });
      }, 30);
    }

    watch(
      () => [currentDept.value.departmentId, userInfo.value.patientsId],
      () => {
        if (currentDept.value.departmentId && userInfo.value.patientsId) {
          getMessageList(currentDept.value.departmentId);
        }
      },
      {
        immediate: true
      }
    );
    return {
      currentDept,
      pageStatus,
      messageResulte,
      nextMessage,
      messageBoxRef,
      sendIsShow,
      sendText,
      sendImg,
      sendVideo,
      imModel
    };
  }
};
</script>

<style lang="scss" scoped>
.message-page {
  background: #fff;
  height: 100vh;

  .message-box {
    background: #f7f7fa;
    padding: 32px;
    overflow-y: auto;
    border-radius: 60px 60px 0 0;
  }

  .message-tools {
    padding: 0 32px;
    .message-input-box {
      padding: 20px 0;
      align-items: center;
    }

    .message-input {
      margin-right: 22px;
      width: 552px;
      height: 72px;
      background: #f7f7fa;
      border: 0;
      border-radius: 100px;
      padding: 18px 32px;
      font-size: 26px;
      font-weight: 400;
      color: #212121;
    }

    .message-btn {
      width: 112px;
      height: 72px;
      background: #27cdc5;
      border-radius: 40px;
      font-size: 26px;
      font-weight: 400;
      color: #fff;
      line-height: 72px;
      text-align: center;
      &.disable {
        background: #e9e9ed;
        color: #a2a6b8;
      }
    }

    .file-options {
      padding: 20px 0;

      .file-btn {
        margin-right: 30px;
        font-size: 30px;
        font-weight: 400;
        color: #777b8f;
      }

      .file-icon {
        font-size: 42px;
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
.hospital-info {
  padding: 24px 32px;
  font-size: 32px;
  font-weight: 500;
  color: #373d52;
  line-height: 44px;

  .hospital-icon {
    margin-right: 12px;
    font-size: 40px;
    color: #fa940f;
  }
}
.disabled-buttom {
  width: 90%;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e8ed;
  border-radius: 56px;
  color: #777b8f;
  font-size: 32px;
  margin-bottom: 30px;
}
.bg-gray {
  background: #f7f7fa;
}
</style>